<template>
  <div class="date-wrap">
    <div class="date-box card-shadow">
      <Calendar v-bind="calendar" @select="select"/>
    </div>
    <div class="text-right">
      <div
        class="card-shadow inline-block text-center font15 back-today"
        hover-class="weui-grid_active"
      >回明天</div>
    </div>
  </div>
</template>
<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/style.css'
import dateUtil from '@/utils/dateUtil'
export default {
  components: { Calendar },
  data () {
    let today = new Date()
    let todayArr = [
      today.getFullYear(),
      today.getMonth() + 1,
      today.getDate()
    ]
    let tomorrow = dateUtil.addDays(new Date(), 1)
    let tomorrowArr = [
      tomorrow.getFullYear(),
      tomorrow.getMonth() + 1,
      tomorrow.getDate()
    ]
    return {
      calendar: {
        ref: 'calendar',
        months: Array.from({ length: 12 }).map((v, i) => i + 1),
        value: tomorrowArr,
        begin: todayArr,
        disabled: [todayArr.join('-')],
        completion: false, // 是否补全日期
        // now: false,
        tileContent: [
          { date: todayArr.join('-'), className: 'is-full', content: '约满' }
        ]
        // arrowLeft: '',
        // arrowRight: '',
      }
    }
  },
  computed: {},
  methods: {
    goToday () {
      let today = new Date()
      let todayArr = [
        today.getFullYear(),
        today.getMonth() + 1,
        today.getDate()
      ]
      this.calendar.value = todayArr
      this.select(todayArr)
    },
    select (val) {
      this.globalData.store.hourWorker = {
        ...this.globalData.store.hourWorker,
        initialDate: dateUtil.format(new Date(val), 'yyyy-MM-dd')
      }
      wx.navigateBack({ delta: 1 })
    }
  },
  mounted () {
    const selectTime = decodeURIComponent(this.$root.$mp.query.select || '')
    if (selectTime) {
      let selectDate = new Date(selectTime)
      let selectDateArr = [
        selectDate.getFullYear(),
        selectDate.getMonth() + 1,
        selectDate.getDate()
      ]
      this.calendar.value = selectDateArr
      this.$refs.calendar.renderer(selectDateArr[0], selectDateArr[1])
    }
  }
}
</script>
<style lang="less">
.date-wrap {
  padding: 20px 15px;
  .date-box {
    margin-bottom: 17px;
    border-radius: 4px;
    overflow: hidden;
    .mpvue-calendar {
      .mc-head-box {
        background-color: #e7effb;
        line-height:35px;
      }
      .calendar-tools {
        background-color: #3186ff;
        margin-bottom: 0;
        height: 50px;
        line-height: 50px;
        .iconfont {
          color: #fff;
        }
        .calendar-info {
          padding-top: 0;
          position: relative;
          &>._div.mc-month{
            height: 50px;
            .mc-month-inner{
              height: 600px;
              &>._span{
                font-size: 35px;
                height: 50px;
                color: #fff;
                width:60px;
                margin-left:15px;
                text-align: right
              }
              &>._span:after {
                content: '月';
                font-size: 15px;
              }
            }
          }
          .mc-year{
            color: #fff;
            position: absolute;
            top: 10px;
            right: 20px;
          }
        }
      }
      .reducible {
        .calendar-date {
          background-color: #3186ff;
          border-radius: 50%;
          color: #fff !important;
        }
        .slot-element {
          font-size: 10px;
          width: 100%;
          bottom: 7px;
          color: #fff;
        }
      }
      .is-full {
        .calendar-date {
          background-color: #f2f2f2;
          border-radius: 50%;
          color: #aaa !important;
        }
        .slot-element {
          font-size: 10px;
          width: 100%;
          bottom: 7px;
          color: #aaa;
        }
      }
    }
  }
  .back-today {
    width: 75px;
    height: 33px;
    line-height: 33px;
    color: #fa4b70;
  }
}
</style>
